<template>
  <div class="systemset-organization-company-container">
    <!-- <el-tabs v-model="queryForm.showType" type="border-card"> -->
    <!-- @tab-click="handleTabs" -->
    <!-- <el-tab-pane label="数据模式" name="date"> -->
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button v-if="queryForm.level > 1" @click="handleBack">
          返回上级
        </el-button>
        <el-button :icon="Plus" type="primary" @click="handleEdit">
          添加
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>

    <div v-if="currpage == 'company'">
      <el-table
        v-loading="listLoading"
        :data="list"
        @selection-change="setSelectRows"
      >
        <el-table-column
          align="center"
          show-overflow-tooltip
          type="selection"
        />
        <el-table-column
          align="center"
          label="组织ID"
          prop="CompanyID"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="queryForm.level !== 1"
          align="center"
          label="所属上级组织"
        >
          <template #default="{ row }">
            <text style="color: #999">{{ row.upCompany }}</text>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="组织名称"
          prop="CompanyName"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="queryForm.level > 1"
          align="center"
          label="开启直属员工"
          width="200"
        >
          <template #default="{ row }">
            <el-switch
              v-model="row.isStaff"
              class="mt-2"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              :active-icon="Check"
              :inactive-icon="Close"
              @change="openclose(row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryForm.level == 2"
          align="center"
          label="总监/总经理"
        >
          <template #default="{ row }">
            <el-button v-if="row.isStaff == 1" text @click="getStaff(row, 1)">
              总监/总经理
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryForm.level == 3"
          align="center"
          label="名下员工"
        >
          <template #default="{ row }">
            <el-button v-if="row.isStaff == 1" text @click="getStaff(row, 2)">
              名下员工
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryForm.level < 3"
          align="center"
          label="开启下级组织"
          width="200"
        >
          <template #default="{ row }">
            <el-switch
              v-model="row.isSubCompany"
              class="mt-2"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              :active-icon="Check"
              :inactive-icon="Close"
              @change="openclose(row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryForm.level < 3"
          align="center"
          label="下级组织"
        >
          <template #default="{ row }">
            <el-button
              v-if="row.isSubCompany === 1"
              text
              @click="getCompany(row)"
            >
              下级组织
            </el-button>
          </template>
        </el-table-column>
        <el-table-column
          v-if="queryForm.level === 3"
          align="center"
          label="名下部门"
        >
          <template #default="{ row }">
            <el-button text @click="getDepartment(row)">名下部门</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开启/停用" width="100">
          <template #default="{ row }">
            <el-switch
              v-model="row.state"
              class="mt-2"
              inline-prompt
              :active-value="1"
              :inactive-value="0"
              :active-icon="Check"
              :inactive-icon="Close"
              @change="openclose(row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEdit(row)">
              编辑
            </el-button>
            <!-- <el-button text @click="handleDelete(row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <div v-else-if="currpage == 'department'">
      <department />
    </div>
    <div v-else-if="currpage == 'staffpost'">
      <staffpost />
    </div>
    <div v-else-if="currpage == 'staff'">
      <staff />
    </div>
    <!-- </el-tab-pane>
      <el-tab-pane label="可视化模式" name="show">
        <TreeOrg />
      </el-tab-pane>
    </el-tabs> -->

    <edit ref="editRef" @fetch-data="fetchData" />
  </div>
</template>

<script>
  // import TreeOrg from './components/TreeOrg.vue'
  import { getList, doEdit, doDelete } from '@/api/systemsetOrganizationCompany'
  import Edit from './components/SystemsetOrganizationCompanyEdit'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'Company',
    components: { Edit },
    setup() {
      const route = useRoute()
      const router = useRouter()
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        editRef: null,
        currpage: 'company',
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        backupid: 0,
        queryForm: {
          upid: 0,
          level: 1,
          pageNo: 1,
          pageSize: 10,
          title: '',
          showType: 'date',
        },
      })

      const openclose = async (row) => {
        const { msg } = await doEdit(row)
        $baseMessage(msg, 'success', 'vab-hey-message-success')
        await fetchData()
      }

      const handleBack = () => {
        state.queryForm.upid = state.backupid
        fetchData()
      }
      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const getStaff = (row, StaffPostRole) => {
        router.push({
          path: 'staff',
          query: {
            level: state.queryForm.level,
            companyid: row.CompanyID,
            departmentid: 0,
            StaffPostRole: StaffPostRole,
          },
        })
      }
      const handleEdit = (row) => {
        if (row.CompanyID) {
          state.editRef.showEdit(row)
        } else {
          const addrow = {
            CompanyID: 0,
            upCompanyID: state.queryForm.upid,
          }
          state.editRef.showEdit(addrow)
        }
      }
      const getCompany = (row) => {
        state.queryForm.upid = row.CompanyID
        fetchData()
        // router.push({
        //   path: 'company',
        //   query: { upid: row.CompanyID },
        // })
      }
      const getDepartment = (row) => {
        router.push({
          path: 'department',
          query: { upCompanyID: row.upCompanyID, CompanyID: row.CompanyID },
        })
      }
      const handleDelete = (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            const { msg } = await doDelete({ ids: row.id })
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            await fetchData()
          })
        } else {
          if (state.selectRows.length > 0) {
            const ids = state.selectRows.map((item) => item.id).join()
            $baseConfirm('你确定要删除选中项吗', null, async () => {
              const { msg } = await doDelete({ ids })
              $baseMessage(msg, 'success', 'vab-hey-message-success')
              await fetchData()
            })
          } else {
            $baseMessage('未选中任何行', 'error', 'vab-hey-message-error')
          }
        }
      }
      const handleSizeChange = (val) => {
        state.queryForm.pageSize = val
        fetchData()
      }
      const handleCurrentChange = (val) => {
        state.queryForm.pageNo = val
        fetchData()
      }
      const queryData = () => {
        state.queryForm.pageNo = 1
        fetchData()
      }
      const fetchData = async () => {
        console.log('state.queryForm1111', state.queryForm)
        state.listLoading = true
        const {
          data: { backupid, upid, level, list, total },
        } = await getList(state.queryForm)
        state.backupid = backupid
        state.queryForm.upid = upid
        state.queryForm.level = level
        state.list = list
        state.total = total
        state.listLoading = false

        console.log('state.queryForm2222', state.queryForm)
      }
      onMounted(() => {
        if (route.query.upid) {
          state.queryForm.upid = route.query.upid
        }
        fetchData()
      })

      return {
        ...toRefs(state),
        openclose,
        setSelectRows,
        getStaff,
        handleBack,
        getCompany,
        getDepartment,
        handleEdit,
        handleDelete,
        handleSizeChange,
        handleCurrentChange,
        queryData,
        fetchData,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>
